<template>
  <div class="background">
    <a-card style="margin-bottom: 10px">
      <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            @submit="handleSubmit"
          >
            <a-form-item label="任务名称">
              <a-input
                allow-clear
                placeholder="请输入任务名称"
                v-model="taskName"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                @click="add('')"
              >新增模板消息发送</a-button>
            </a-form-item>
          </a-form>

        </a-col>
      </a-row>
    </a-card>
    <a-card>
      <a-menu
        v-model="current"
        mode="horizontal"
        @click="handleClick"
      >
        <a-menu-item key="1">消息群发任务 </a-menu-item>
        <!-- <a-menu-item key="2">未执行群发任务 </a-menu-item>
        <a-menu-item key="3">历史执行群发任务 </a-menu-item> -->
      </a-menu>
      <div id="change">
        <a-table
          bordered
          :loading="loading"
          :pagination="pagination"
          :columns="columns"
          :data-source="dataSource"
          @change="handleTableChange"
          :scroll="{ x: true }"
        >
          <span
            slot="status"
            slot-scope="txt, record"
          >
            <!-- <span
              v-if="record.triggerStatus == 1"
              class="end"
            >开启</span>
            <span
              v-else
              class="start"
            >关闭</span> -->
           <a-switch :checked="record.triggerStatus == 1" :disabled="true"></a-switch>

          </span>
          <template
            slot="action"
            slot-scope="txt, record"
          >
            <a
              class="mr-10"
              v-if="record.triggerStatus == 0"
              @click="change(record,1)"
            >
              开启
            </a>
            <a
              v-else
              class="mr-10"
              @click="change(record,0)"
            >
              关闭
            </a>
            <a
              class="mr-10"
              @click="change(record,2)"
            >
              执行一次
            </a>
            <!-- <a
            class="mr-10"
            @click="toDetail(record)"
          >
            详情
          </a> -->
            <a
              class="mr-10"
              @click="add(record)"
            >
              编辑
            </a>

            <a
              class="mr-10"
              @click="deleteRecord(record)"
            >
              删除
            </a>
          </template>
        </a-table>
      </div>
      <create
        v-if="showAdd"
        :news="news"
        :appid="appid"
        :menuName="menuName"
        @close="close"
      ></create>

    </a-card>

  </div>
</template>

<script>
import { postAction, getAction } from '@/api/manage'
import create from './create.vue'
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'id'
  },
  {
    title: '任务名称',
    dataIndex: 'taskName'
  },
  {
    title: '描述',
    dataIndex: 'taskDesc'
  },
  //  {
  //   title: '发送对象',
  //   dataIndex: 'userBusinessId'
  // },
  {
    title: '状态',
    width: 90,
    scopedSlots: { customRender: 'status' }
  },
  {
    title: '时间',
    dataIndex: 'createTime'
  },
  {
    title: '操作',
    width: 130,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    create
  },
  props: {
    appid: {
      type: String,
      default: null
    },
    menuName: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      columns,
      current: ['1'],
      urlKey: 'basemgt-wx',
      dataSource: [],
      loading: false,
      taskName: '',
      form: this.$form.createForm(this),
      showAdd: false,
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: total => `共 ${total} 条记录`,
        itemRender: (current, type, originalElement) => {
          if (type === 'prev') {
            return <a>上一页</a>
          } else if (type === 'next') {
            return <a>下一页</a>
          }
          return originalElement
        }
      }
    }
  },
  mounted() {
    this.loadData()
  },
  watch: {
    appid() {
      this.loadData()
    }
  },
  methods: {
    handleTableChange(pagination) {
      this.pagination = pagination
      this.loadData()
    },

    close() {
      this.showAdd = false
      this.loadData()
    },
    add(record) {
      this.showAdd = true
      this.news = record
    },
    changeMenu() {
      this.loadData()
    },
    handleClick(e) {
      console.log('click', e.key)
      this.type = e.key
      this.loadData(1)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.loadData(1)
    },
    loadData(key) {
      this.loading = true
      const params = {
        appid: this.appid,
        pageSize: this.pagination.pageSize,
        pageNum: this.pagination.current
      }
      if (key) {
        this.pagination.current = 1
        params.pageNum = 1
      }
      if (this.taskName) {
        params.taskName = this.taskName
      }
      try {
        postAction(`${this.urlKey}/WxTemplateTask/findWxTemplateTaskListByCondition`, params).then(data => {
          if (data.code == 200) {
            this.dataSource = data.data.records
            this.pagination.total = data.data.total
          } else {
            this.$message.warning(data.msg || data.message)
          }
        })
      } catch (error) {
        this.$message.warning('获取失败')
      } finally {
        this.loading = false
      }
    },
    changeStatus(e,record){
      console.log(e,record)
      let text = ''
      if (!e) {
        text = '关闭'
      } else{
        text = '开启'
      } 
      this.$confirm({
        content: '确定要' + text + record.taskName + '吗？',
        onOk: () => {
          const params = {
            id: record.jobId,
            type: e?1:0,
            templateTaskId: record.id
          }
          getAction(`${this.urlKey}/CallXxlJob/designModelScheduleTaskControl`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('操作成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    },
    change(record, type) {
      let text = ''
      if (type == 0) {
        text = '关闭'
      } else if (type == 1) {
        text = '开启'
      } else {
        text = '执行'
      }
      this.$confirm({
        content: '确定要' + text + record.taskName + '吗？',
        onOk: () => {
          const params = {
            id: record.jobId,
            type: type,
            templateTaskId: record.id
          }
          getAction(`${this.urlKey}/CallXxlJob/designModelScheduleTaskControl`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('操作成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    },
    deleteRecord(item) {
      this.$confirm({
        content: '确定要删除' + item.taskName + '吗？',
        onOk: () => {
          const params = {
            id: item.id
          }
          getAction(`${this.urlKey}/WxTemplateTask/deleteWxTemplateTaskById`, params).then(data => {
            if (data.code == 200) {
              this.$message.success('删除成功')
              this.loadData()
            } else {
              this.$message.warning(data.msg || data.message)
            }
          })
        },
        onCancel() {}
      })
    }
  }
}
</script>
<style scoped>
.start {
  position: relative;
  left: 10px;
}
.end {
  position: relative;
  left: 10px;
}
.start::before {
  content: ' ';
  border: 4px solid red;
  border-radius: 4px;
  position: absolute;
  margin-left: -10px;
  margin-top: 6px;
}
.end::before {
  content: ' ';
  border: 4px solid green;
  border-radius: 4px;
  position: absolute;
  margin-left: -10px;
  margin-top: 6px;
}
</style>

<style>
#change .ant-table {
  font-size: 15px !important;
}

</style>
